<template>
	<div
		class="status-bar"
		:style="[
			{
				height: statusBarHeight + 'px',
			},
		]"
	></div>
</template>

<script>
export default {
	name: "status-bar",
	props: {},
	data() {
		return {
			statusBarHeight: 0,
			titleBarHeight: 0,
		}
	},
	mounted() {
		//获取状态栏的高度
		// #ifndef H5
		let systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
		// #endif
	},
}
</script>

<style lang="scss" scoped>
.status-bar {
	width: 100%;
}
</style>
